<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <!--   搜索输入框   -->
      <el-col :span="7">
        <el-input v-model="queryForm.query" :placeholder="$t('table.placeholder')" clearable>
        </el-input>
      </el-col>
      <!--   搜索按钮   -->
      <el-button :icon="Search" type="primary" @click="initGetUsersList">{{ $t("table.search") }}</el-button>
      <!--   添加用户按钮   -->
      <el-button type="primary" @click="handleDialog(null)">{{ $t("table.adduser") }}</el-button>
    </el-row>

    <!--  数据显示的 table  -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column v-for="(item,idx) in options" :key="idx" :label="$t(`table.${item.label}`)" :prop="item.prop"
                       :width="item.width">
        <!--    状态值    -->
        <template v-if="item.prop==='mg_state'" v-slot="{row}">
          <el-switch v-model="row.mg_state" @click="changeState(row)"/>
        </template>
        <!--    创建时间    -->
        <template v-if="item.prop==='create_time'" v-slot="{row}">
          {{ $filters.filterTimes(row.create_time) }}
        </template>
        <!--    最后的三个按钮    -->
        <template v-if="item.prop==='action'" #default="{row}">
          <el-button :icon="Edit" size="small" type="primary" @click="handleDialog(row)"></el-button>
          <el-button :icon="Setting" size="small" type="warning"></el-button>
          <el-button :icon="Delete" size="small" type="danger" @click="delUser(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <el-pagination
        v-model:currentPage="queryForm.pagenum"
        v-model:page-size="queryForm.pagesize"
        :page-sizes="[2,5,10,15]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>

  <!-- 添加用户的窗口 -->
  <Dialog :key="new Date().getTime()"
          v-model="dialogVisible"
          :dialogTableValue="dialogTableValue"
          :dialogTitle="dialogTitle"
          @initUserList="initGetUsersList"/>
</template>

<script setup>
import {Delete, Edit, Search, Setting} from '@element-plus/icons-vue'
import {changeUserState, deleteUser, getUser} from "@/api/users.js";
import {options} from "@/views/users/options.js";
import {ElMessage} from "element-plus";
import {useI18n} from "vue-i18n";
import Dialog from "@/views/users/components/dialog.vue";
import {isNull} from "@/utilities/filters.js";

const i18n = useI18n()

const dialogTitle = ref("")

// 请求列表数据
const queryForm = ref({
  query: "",
  pagenum: 1,
  pagesize: 2,
})

// table数据
const tableData = ref([])

// 总数据量
const total = ref(0)
// 请求内容
const initGetUsersList = () => {
  // 设置在100ms后才去获取数据
  setTimeout(async () => {
    const res = await getUser(queryForm.value)
    total.value = res.total
    tableData.value = res.users
  }, 100)
}

initGetUsersList()

// 变更每页显示条数
const handleSizeChange = (pageSize) => {
  queryForm.value.pagenum = 1
  queryForm.value.pagesize = pageSize
  initGetUsersList()
}
// 点击其他页码
const handleCurrentChange = (pageNum) => {
  queryForm.value.pagenum = pageNum
  initGetUsersList()
}

// 改变用户状态
const changeState = async (info) => {
  await changeUserState(info.id, info.mg_state)
  ElMessage({
    message: i18n.t("message.updateSuccess"),
    type: 'success',
  })
}

// 需要传递给 dialog 进行显示的值
const dialogTableValue = ref({})
// 添加/编辑用户的窗口
const dialogVisible = ref(false)
const handleDialog = (row) => {
  if (isNull(row)) {
    dialogTitle.value = "添加用户"
  } else {
    dialogTitle.value = "编辑用户"
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}
//删除用户
const delUser = (row) => {
  ElMessageBox.confirm(
      i18n.t("dialog.deleteTitle"),
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
  )
      .then(async () => {
        // 确定删除
        await deleteUser(row.id)
        initGetUsersList()
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

// 分页右移,看上去没生效
:deep(.el-pagination) {
  padding-top: 16px;
  box-sizing: border-box;
  text-align: right;
}
</style>
